{% extends 'base.html' %}
{% block title %} 查询员工 {% endblock %}
{% block content %}
<div class="container" style="background-color: #fff0f5; padding: 20px; border-radius: 10px;">
    <div style="margin-bottom: 15px;">
        <a href="{% url 'emp_add' %}" class="btn btn-primary" style="background-color: #ff6b81; border: none; padding: 10px 20px; font-size: 16px; border-radius: 5px;">添加员工</a>
        <form method="get" style="float:right; width:250px;">
            <div class="input-group">
                <input type="text" name="q" class="form-control" style="border-radius: 5px; border: 1px solid #ff6b81;"/>
                <span class="input-group-btn">
                    <button class="btn btn-default" style="background-color: #ff6b81; border: none; border-radius: 5px; color: white;"><span class="glyphicon glyphicon-search"></span></button>
                </span>
            </div>
        </form>
    </div>
    <div class="panel panel-default" style="border: none;">
        <div class="panel-heading" style="background-color: #ff6b81; color: white; font-size: 18px; border-radius: 5px 5px 0 0;">
            <span class="glyphicon glyphicon-th-list"></span> 员工信息列表
        </div>
        <div class="panel-body" style="padding: 0;">
            <table class="table table-bordered table-striped table-hover" style="margin-bottom: 0;">
                <thead style="background-color: #ffe4e1;">
                <tr style="font-size: 16px; color: #333;">
                    <th style="text-align: center;">员工编号</th>
                    <th style="text-align: center;">姓名</th>
                    <th style="text-align: center;">工资</th>
                    <th style="text-align: center;">雇佣日期</th>
                    <th style="text-align: center;">部门</th>
                    <th style="text-align: center;">操作</th>
                </tr>
                </thead>
                <tbody>
                {% for emp in emp_list %}
                <tr style="font-size: 15px; color: #555;">
                    <td style="text-align: center;">{{ emp.empno }}</td>
                    <td style="text-align: center;">{{ emp.ename }}</td>
                    <td style="text-align: center;">{{ emp.sal }}</td>
                    <td style="text-align: center;">{{ emp.hiredate|date:'Y-m-d' }}</td>
                    <td style="text-align: center;">{{ emp.dept.dname }}</td>
                    <td style="text-align: center;">
                        <a href="{% url 'emp_update' %}?empno={{ emp.empno }}" class="btn btn-xs btn-success" style="font-size: 14px; margin-right: 5px; background-color: #32cd32; border: none;">修改</a>
                        <a href="{% url 'emp_delete' %}?empno={{ emp.empno }}" class="btn btn-xs btn-danger" style="font-size: 14px; background-color: #ff4500; border: none;">删除</a>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div style="text-align: center; margin-top: 10px;">
        {{ page_str }}
    </div>
</div>
{% endblock %}
